<!-- 1 脚本 -->
<script lang='ts' setup name='index'>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
import router from '@/router';


//属性
let showForm = ref(false)
let loading = ref(false)
const tableData = ref([ ])


let form = ref({
    name: '',
    password: '',
    gender: '1',
    age: 0,
    pass: '',
    favs: [],
    nationality: 'CN',
    brief: 'adsafdsafsaf'
})


function queryList(){

      loading.value = true;


    const xhr = new XMLHttpRequest();
    const url = 'http://127.0.0.1:8080/web/user/list';
    const async = true; // 是否异步
    xhr.open('GET', url, async);
    xhr.onreadystatechange = ()=>{
        
        if (xhr.readyState === 4 && xhr.status === 200) {
            // let ret = JSON.parse(xhr.responseText);
            let {code,data,msg} = JSON.parse(xhr.responseText);
            if(code == 200){

                tableData.value =  data
                  loading.value = false;
            }else if(code == 404){
                alert(msg || "地址不正确")
            }
            else if(code == 500){
                alert(msg || "服务器出错")
            }
        
        }
    };
  
    xhr.send();
}


// 方法
function onSubmit() {

    //提示一个 确认框 
    ElMessageBox.confirm('确认保存?', '消息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }
    ).then(() => {
        console.log('保存信息： form.value', form.value)

        //  ElMessage({
        //         type: 'success',
        //         message: '保存成功',
        //  })


        ElNotification({
            title: '信息',
            message: '保存成功',
            type: 'success',
        })

        showForm.value = false

        queryList();


    }).catch(() => { })

}


onMounted(()=>{
    //查询数据
    queryList()
})



</script>


<!-- 2 模板 -->
<template>
    <div v-loading="loading">
        <h3>用户管理</h3>
        <el-row :gutter="20">
            <el-col :span="3">
                <div class="grid-content ep-bg-purple" />
                <el-button @click="showForm = true">添加</el-button>
            </el-col>
            <el-col :span="3">
                <!-- <div class="grid-content ep-bg-purple" />2 -->
            </el-col>
            <el-col :span="3">
                <!-- <div class="grid-content ep-bg-purple" />3 -->
            </el-col>
        </el-row>


        <!-- 表格 -->
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号" width="160"  align="center"/>
            <el-table-column prop="username" label="用户名" />
            <el-table-column prop="nickname" label="昵称" />
            <el-table-column prop="password" label="密码" />
            <el-table-column prop="lastLogin" label="最后登录时间"  />
            
            <el-table-column prop="status" label="状态" />
        </el-table>



        <!-- SHIFT + ALT +F  -->
        <el-dialog v-model="showForm" title="用户编辑" width="500">

            <!-- 表单 -->
            <el-form :model="form" label-width="auto" style="max-width: 600px">
                <el-form-item label="用户名">
                    <el-input v-model="form.name" clearable />
                </el-form-item>

                <el-form-item label="密码">
                    <el-input v-model="form.password" type="password" clearable />
                </el-form-item>

                <el-form-item label="性别">
                    <el-radio-group v-model="form.gender" size="large" fill="#6cf">
                        <el-radio-button label="男" value="1" />
                        <el-radio-button label="女" value="2" />

                    </el-radio-group>
                </el-form-item>
                <el-form-item label="爱好">
                    <el-checkbox-group v-model="form.favs">

                        <el-checkbox label="足球" size="large" />
                        <el-checkbox label="篮球" size="large" />
                        <el-checkbox label="乒乓球" size="large" />
                    </el-checkbox-group>
                </el-form-item>

                <el-form-item label="国家">
                    <el-select v-model="form.nationality" placeholder="请选择">
                        <el-option label="中国" value="CN" />
                        <el-option label="美国" value="US" />
                    </el-select>
                </el-form-item>
                <el-form-item label="爱好">
                    <el-input v-model="form.brief" style="width: 240px" :rows="6" type="textarea" placeholder="请输入爱好" />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>

        </el-dialog>




    </div>


</template>


<!-- 3 样式 -->
<style scoped></style>